import { View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import React from "react";

//  https://reactnavigation.org/docs/handling-safe-area/
// The react-native-safe-area-context library also exports a SafeAreaView component. While it works on Android, it also has the same issues with jumpy behavior on vertical animations. In addition, the SafeAreaView component and useSafeAreaInsets hook can update at different times, resulting in flickering when using them together. So we recommend always using the useSafeAreaInsets hook instead and avoid using the SafeAreaView component for consistent behavior.
const SafeScreen = ({ children }: { children: React.ReactNode }) => {
  const insets = useSafeAreaInsets();
  return (
    <View
      style={{
        paddingTop: insets.top,
        flex: 1,
      }}
    >
      {children}
    </View>
  );
};

export default SafeScreen;
